import Taro, { useState, FC, memo, useCallback } from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import { AtIcon, AtFloatLayout } from "taro-ui";
import classnames from "classnames";
import "./index.scss";
import { currentSongInfoType, MusicItemType } from "../../constants/types";

type Props = {
  songInfo: {
    currentSongInfoState: currentSongInfoType;
    isPlaying: boolean;
    canPlayList: Array<MusicItemType>;
  };
  isHome?: Boolean;
  onUpdatePlayStatus: (object) => any;
};

const Music: FC<Props> = props => {
  const { songInfo, isHome, onUpdatePlayStatus } = props;
  let { currentSongInfoState, isPlaying, canPlayList } = songInfo;
  const switchPlayStatus = useCallback(() => {
    console.log("switchPlayStatus");
  }, []);

  const setIsOpened = useCallback(() => {
    console.log("switchPlayStatus");
  }, []);
  return (
    <View className={classnames("music flex middle", { isHome: isHome })}>
      <Image
        src={currentSongInfoState.al.picUrl}
        className={classnames("music-pic", { circling: isPlaying })}
      ></Image>
      <View className="music-info cell-main">
        <View className="name">{currentSongInfoState.name}</View>
        <View className="l desc">
          {currentSongInfoState.ar[0] ? currentSongInfoState.ar[0].name : ""} -{" "}
          {currentSongInfoState.al.name}
        </View>
      </View>
      <View className="music-icon">
        <AtIcon
          value={isPlaying ? "pause" : "play"}
          size="30"
          color="#FFF"
          onClick={() => switchPlayStatus()}
        ></AtIcon>
        <AtIcon
          value="playlist"
          size="30"
          color="#FFF"
          className="icon_playlist"
          onClick={() => setIsOpened(true)}
        ></AtIcon>
      </View>
    </View>
  );
};
// Music.defaultProps = {
//   songInfo: {
//     currentSongInfoState: {
//       id: 0,
//       name: "",
//       ar: [],
//       al: {
//         picUrl: "",
//         name: ""
//       },
//       url: "",
//       lrcInfo: "",
//       dt: 0, // 总时长，ms
//       st: 0 // 是否喜欢
//     },
//     canPlayList: [],
//     isPlaying: false
//   }
// };
export default Music;
